<template>
  <template v-if="data.list.length != 0">
    <scroll-view :scroll-y="true">
      <view v-for="(item, index) in data.list" :key="index" @tap="liaotian(index)">
        <view class="xiaoxi">
          <image :src="item.picAddress" mode="scaleToFill"></image>
          <view class="Content">
            <view class="shang">
              <text>{{ item.username }}</text>
              <text style="color: #999">{{ getLocalTime(item.time) }}</text>
            </view>
            <view class="xia">
              <text>{{ item.content }}</text>
              <uni-badge class="uni-badge-left-margin" :text="item.num" />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <movable-area class="movableArea">
      <movable-view class="movableView" direction="all" x="800rpx" y="800rpx" @tap="tuodon()">
        <image src="../../static/images/旋转.jpg" mode="widthFix"></image>
        <text>设置</text>
      </movable-view>
    </movable-area>
  </template>
  <template v-else>
    <view><image style="height: 200rpx; width: 200rpx; margin-top: 100rpx"></image></view>
  </template>
  <!-- 弹出层 -->
  <!--  #ifdef MP-WEIXIN  -->
  <unipopup ref="popup" type="bottom" background-color="#fff"
    ><view class="popup-content popup-height" @tap="person('friends')">
      <text class="icon iconfont icon-tuijianfuwu" /> 添加好友</view
    >
    <view class="popup-content popup-height" @tap="person('clear')"
      ><text class="icon iconfont icon-dizhi"></text>清除缓存
    </view>
    <view class="popup-content popup-height" @tap="person('lieb')"
      ><text class="icon iconfont icon-dizhi"></text>好友列表
    </view>
  </unipopup>
  <!--  #endif -->
</template>

<script lang="ts" setup>
// import  unibadge  from '../../components/uni-badge/uni-badge.vue'
// #ifdef MP-WEIXIN

import unipopup from '../../components/components/uni-popup/uni-popup.vue'

// #endif
import { ref, computed } from 'vue'
import { onLoad, onPageScroll, onPullDownRefresh, onShow } from '@dcloudio/uni-app'
// 时间文件js
import { formatMessageDate, formatTime, getChatTime } from '@/composables/time'
import { liaotianAPI } from '../../services/liaotian'
import { myStore } from '@/stores'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
// 时间搓算法
function getLocalTime(n) {
  return new Date(parseInt(n)).toLocaleString().replace(/:\d{1,2}$/, ' ')
}
// getLocalTime(1642583223751) //'2022/1/19 下午5:07 '
const time = ref<string>(formatTime(new Date()))
console.log(time.value)

//消息列表数据
const data = ref<any>({
  list: [],
})
onLoad(() => {
  // 触发下拉刷新的事件
  onPullDownRefresh1()
})
//获取数据刷新页面时候

onShow(() => {
  getdata()
})
// 那token
const data2 = ref('')
const user = myStore()
const time1 = formatMessageDate(time.value)
const getdata = async () => {
  const res = await liaotianAPI(user.userinfo.token,user.userinfo.id)
  proxy.socket.emit('message4', user.userinfo.username)
  data.value.list = res.data

  console.log(res, '看看')
  // proxy.socket.on('message4', web => {
  //   console.log(web, '构建6666666666666666666')

  // })
  // proxy.socket.on('message2', (userB, toA, data) => {
  //   console.log(data,"数据什么")

  //   // if (toA === userA.userinfo.id)
  //   data.value.list.push(data)
  // })
}

// 监听下拉刷新
onPullDownRefresh(() => {
  // 触发下拉刷新的事件
  console.log('下拉刷新')
  onPullDownRefresh1()
})
// 触发下拉刷新的事件函数onPullDownRefresh
const onPullDownRefresh1 = () => {
  console.log('refresh')
  getdata()
  setTimeout(function () {
    uni.stopPullDownRefresh()
  }, 1000)
}
// 触发拖动图标事件
const popup = ref<any>(null)
const tuodon = () => {
  console.log('tuodon')
  popup.value.open()
}
// 弹出层的内部添加好友和清除缓存
const person = (e) => {
  console.log('person')
  switch (e) {
    case 'friends':
      uni.showToast({
        title: '好友',
        icon: 'none',
      })
      break
    case 'clear':
      break
    case 'lieb':
      uni.navigateTo({ url: '/pagesA/socketliao/comp/haoyoulieb/index' })
      break
    default:
      break
  }
  // 关闭弹出层
  popup.value.close()
}
// 跳转聊天界面
const liaotian = (index) => {
  uni.navigateTo({
    url: `/pagesA/socketliao/comp/liaotianjiem/index?toid=${data.value.list[index].userid}&name=${data.value.list[index].username}`,
  })
}
</script>

<style scoped lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
// 消息列表样式
.xiaoxi {
  width: 100%;
  margin-bottom: 1rpx;
  display: flex;
  align-items: center;
  height: 120rpx;
  // 写个圆角
  border-radius: 10rpx;
  // 背景色
  background-color: #fff;
  // 边框
  border: 1rpx solid #ccc;
  // 阴影
  box-shadow: 0 0 10rpx #ccc;
  // 圆角
  border-radius: 10rpx;
  // 阴影
}
.xiaoxi image {
  // 写个圆角
  border-radius: 50rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  width: 80rpx;
  height: 80rpx;
  // 背景色
  background-color: #ccc;
  // 边框
  border: 1rpx solid #ccc;
  // 阴影
  box-shadow: 0 0 10rpx #ccc;
}
.Content {
  /* 设置显示为弹性布局 */
  width: 100%;
  display: flex;
  flex: 1;
  /* 设置弹性布局的方向为列 */
  flex-direction: column;
  /* 在弹性布局中居中对齐项目 */
  justify-content: center;
  /* 在弹性布局中居中对齐项目 */
  align-items: center;
  /* 设置内边距为10rpx */
  padding: 30rpx;
}
.Content .shang {
  display: flex;
  justify-content: space-between;

  align-items: center;
  width: 100%;
}
.Content .xia {
  // 颜色灰色字体
  color: #999;
  // 浅色一点透明
  opacity: 0.6;
  // 字体大小
  font-size: 24rpx;
  // 字体加粗
  font-weight: bold;
  // 字体居中
  text-align: center;

  display: flex;
  justify-content: space-between;

  align-items: center;
  width: 100%;
}
.Content .xia text {
  //  文字换行溢出处理
  // 左边对齐
  text-align: left;
  white-space: nowrap; // 设置文本在块中呈现为不换行
  overflow: hidden; // 如果文本超过块的大小，则隐藏溢出内容
  text-overflow: ellipsis; // 如果文本超过块的大小，则使用省略符来代替溢出的内容
  lines: 1; // 将文本显示为单行，即使块的高度大于文本行高
  width: 400rpx; // 设置文本块的宽度为400rpx
  // 不理解为什么 50%就不行  固定长度就可以
}
.uni-badge-left-margin {
  margin-left: 10rpx;
  position: relative;
  right: 2rpx;
}

// 、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

// 可拖动的图标浮动
.movableArea {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
  .movableView {
    pointer-events: auto; //可以点击
    width: 120rpx;
    height: 120rpx;
    //变圆润好看

    .icon {
    }
    image {
      //圆润
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }
    text {
      position: absolute;
      top: 95%;
      left: 0;
      bottom: 0;
      width: 120rpx;
      height: 18rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25rpx;
      color: #770404;
    }
  }
}
// 弹出层
.popup-content {
  // 写个好看下边线
  border-bottom: 1px solid #ccc;
  // 写个好看的背景
  background: #fff;
  // 写个好看的边框
  border-radius: 5px;
  // 写个好看的阴影
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 15px;
  height: 50px;
  background-color: #fff;
  width: 100%;
  //字体分开
  font-size: 16px;
  font-weight: 500;
  color: #333;
  // 写个好看的阴影
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  //字体大小
  font-size: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-height text {
  margin-right: 60rpx;
}
</style>
